<template>
  <div class="relative-position" style="min-height: 160px">
    <a-loading :visible="loading" height="160px"></a-loading>
    <q-list no-border separator v-if="type ==='map' || type ==='share'">
      <a-none v-if="querySet && querySet.length === 0"></a-none>
      <q-item v-for="instance in querySet" :key="instance.id">
        <div>
          <div><router-link :to="'/map/'+instance.id" class="text-grey-9 size-18 bold">{{ instance.name || '未命名地图' }}</router-link></div>
          <div class="size-14 text-grey-6">
            <span class="q-mr-sm">更新于{{ timesince(instance.update_date) }}</span>
            <span class="q-mr-sm">{{ instance.editors.length }}人协作</span>
            <span class="q-mr-sm">{{ instance.up_number }}赞</span>
            <span class="q-mr-sm">{{ instance.comment_number }}评论</span>
            <span class="q-mr-sm">{{ instance.favorite }}收藏</span>
          </div>
        </div>
      </q-item>
    </q-list>
    <a-forum-list v-else :forums="querySet"></a-forum-list>
    <a-pagination :page="page" :max="max"></a-pagination>
  </div>
</template>

<script>
  import { querySetMixin } from '../../mixins'

  export default {
    name: 'aUserIndexMap',
    mixins: [querySetMixin],
    data: function () {
      return {
        statistic: null
      }
    },
    props: {
      type: {
        type: String,
        required: true
      },
      id: {
        type: String,
        required: false
      }
    },
    created () {
    },
    computed: {
      api () {
        const id = this.id || this.auth.id
        let result

        switch (this.type) {
          case 'map':
            result = `/api/user/${id}/maps/?is_public=1`
            break
          case 'share':
            result = `/api/user/${id}/co_maps/`
            break
          case 'forum':
            result = `/api/user/${id}/forums/`
            break
        }

        return result
      }
    },
    watch: {
      type () {
        this.querySet = null
        this.count = 0
        this.query()
      }
    },
    methods: {
    }
  }
</script>

<style lang="stylus">
</style>
